<!doctype html>
<html>
<head> 
  <meta charset="utf-8">
  
  <title>exemplar</title>
  
  <style>
    html { padding: 0; margin: 0;}
    #map3d {
      width: 800px;
      height: 600px;
    }
  </style>

  <script src="https://www.google.com/jsapi?key=ABQIAAAAIN6HyN8u1utYFkdsBwOoPxQGj0PqsCtxKvarsoS-iqLdqZSKfxR5KkFmbwxVhIwElUEULZ7wePCxpw"></script>
  <script>
  google.load('earth','1');

  var ge,
      kmlUrl = 'http://www.google.com/fusiontables/exporttable?query=select+col0%2C+col1%2C+col2%2C+col3+from+807406+&o=kmllink&g=col2',
      tourPlacemarks,
      placemarkNum,
      placemarkPause = 2000;

  function init() {
    google.earth.createInstance('map3d', initCallback, failureCallback);
  }

  function failureCallback() { }

  function initCallback(pluginInstance) {
    ge = pluginInstance;
    ge.getWindow().setVisibility(true);

    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

    // add some layers
    ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
    ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
    ge.getLayerRoot().enableLayerById(ge.LAYER_BUILDINGS, true);

    // fetch KML from Fusion tables
    google.earth.fetchKml(ge, kmlUrl, fetchComplete);
  }
  
  function fetchComplete(kmlObject) {
    if (!kmlObject) {
      console.log('unable to fetch KML file.');
      return;
    }
    
    // append fetched KML features
    ge.getFeatures().appendChild(kmlObject);
    
    // activate tour button
    var button = document.getElementById('tourButton');
    button.textContent = 'Start Tour!';
    button.disabled = false;
    button.addEventListener('click', startTour, false);
  }
  
  function startTour() {
    document.getElementById('tourButton').disabled = true;
    
    tourPlacemarks = ge.getElementsByType('KmlPlacemark');
    placemarkNum = 0;
    ge.getOptions().setFlyToSpeed(.3);
    
    flyToNextPlacemark();
    
    google.earth.addEventListener(ge.getView(), 'viewchangeend', function() {
      setTimeout(flyToNextPlacemark, placemarkPause);
    });
  }
  
  function flyToNextPlacemark() {
    // finished
    if (placemarkNum > tourPlacemarks.getLength()) {
      return;
    }
    
    var placemark = tourPlacemarks.item(placemarkNum),
        point = placemark.getGeometry(),
        lookAt = ge.createLookAt('');
    
    lookAt.setLatitude(point.getLatitude());
    lookAt.setLongitude(point.getLongitude());
    lookAt.setRange(500);
    lookAt.setTilt(40 + Math.random()*20);
    lookAt.setHeading(Math.random() * 360);
    
    ge.getView().setAbstractView(lookAt);
    
    placemarkNum++;
  }

  document.addEventListener('DOMContentLoaded', init, false);
  </script>

</head>

<body>
  <button id="tourButton" disabled>Tour Loading</button>
  <div id="map3d"></div>
</body>
</html>
